<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>21_径向渐变</title>
<!--
辐射状,由中心往外渐变
容器正方形:中间点由圆形扩散
容器长方形:中心点由椭圆扩散
-->
  <style>
    div{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      float: left;
      margin-left: 50px;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .box1{
      background-image: radial-gradient(red,yellow,green);
    }
    .box2{
      background-image: radial-gradient(at left top,red,yellow,green);
    }
    .box3{
      background-image: radial-gradient(at 100px 10px,red,yellow,green);
    }
    .box4{
      background-image: radial-gradient(circle,red,yellow,green);
    }
    .box5{
      background-image: radial-gradient(100px 100px,red,yellow,green);
    }
    .box6{
      /*由圆心开始达到对应高度时应该为对应的颜色*/
      background-image: radial-gradient(red 50px,yellow 50px,green 150px);
    }
    /*综合写法:圆的形状,圆的位置,渐变颜色及区域*/
    .box7{
      background-image: radial-gradient( 100px 100px at 100px 150px ,red 50px,yellow 150px,green 200px);
    }
  </style>
</head>
<body>
<div class="box1">默认位置,圆心在容器中心</div>
<div class="box2">通过关键词修改圆心位置</div>
<div class="box3">通过像素值(当前容器坐标)调整圆心位置</div>
<div class="box4">通过circle调整为正圆</div>
<div class="box5">通过像素值调整圆(椭圆)</div>
<div class="box5">调整径向渐变的区域</div>
<div class="box7">复合调整径向渐变</div>
</body>
</html>